<template>
    <div class="navBox">
        <div class="recommend" style="margin-top: 10px;">
            <p class="nav_title">推荐</p>
            <router-link :to="item.tolink" tag="span" v-for="item in recommend" :key="item.id" class="nav_c" >
                <img :src="item.nav_img" > 
                <p class="nav_st">{{item.nav_name}}</p> 
            </router-link>
        </div>

        <div class="my_music">
            <p class="nav_title" style="margin-top:20px;">我的音乐</p>
            <router-link  :to="item.tolink" tag="span" v-for="item in my_music" :key="item.id" class="nav_c" >
                <img :src="item.nav_img" > 
                <p class="nav_st">{{item.nav_name}}</p> 
            </router-link>
        </div>

        <div class="creat_list">
            <p class="nav_title" style="margin-top:20px;">创建的歌单</p>
            <router-link  :to="item.tolink" tag="span" v-for="item in created_music" :key="item.id" class="nav_c" >
                <img :src="item.nav_img" > 
                <p class="nav_st">{{item.nav_name}}</p> 
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recommend:[ // 推荐
                { id: 1 , nav_img: require('../../assets/M_nav/findmusic.png'), nav_name:"发现音乐", tolink: "/findMusic" },
                { id: 2 , nav_img: require('../../assets/M_nav/FM.png'), nav_name:"私人FM",  tolink: "personalFM"  },
                { id: 3 , nav_img: require('../../assets/M_nav/life_video.png'), nav_name:"直播",  tolink: "/livebroadcast" },
                { id: 4 , nav_img: require('../../assets/M_nav/video.png'), nav_name:"视频", tolink: "/video" },
                { id: 5 , nav_img: require('../../assets/M_nav/friend.png'), nav_name:"朋友", tolink: "friend" }
            ],
            my_music:[ // 我的音乐
                { id: 1 , nav_img: require('../../assets/M_nav/location.png'), nav_name:"本地音乐", tolink: "/localmusic" },
                { id: 2 , nav_img: require('../../assets/M_nav/download.png'), nav_name:"下载管理", tolink: "/download" },
                { id: 3 , nav_img: require('../../assets/M_nav/cloud.png'), nav_name:"我的音乐云盘", tolink: "/mycloud" },
            ],
            created_music:[  // 创建的歌单
                { id: 1, nav_img: require('../../assets/M_nav/heart.png'), nav_name:"我喜欢的音乐", tolink: "/ilikes"}
            ],
        }
    },
}
</script>

<style scoped>
.navBox{ height: 656px; background-color: #191b1f;  } /* border-right: 1px solid; border-color: #23262c ; */
.nav_title{ display:block; height:35px; color: #a3a4a5; font-size: 16px; font-weight: bold; margin-left: 10px; }
.nav_c{ height:40px; display:block; cursor: pointer; }
.nav_c p{ font-family: "宋体"; font-weight: 300; }
.nav_st{ float:left; line-height:40px; color: #a3a4a5; font-size: 14px; margin-left: 10px; }
.nav_c img{ float: left; height:30px; margin-top:2px; margin-left: 15px; }

/* 路由高亮 */
.mui-active{ background-color: #212327; }  
</style>